<template>
  <div class="city">
    <!-- 搜索 -->
    <van-search class="search" v-model="iptVal" show-action placeholder="搜索" @input="iptEvents" @cancel="onCancel" />
    <!-- 列表 -->
    <ul class="list">
      <li class="item" v-for='item in list' :key='item.id' @click="sendMessge(item)">
        {{item.name}}
      </li>
    </ul>
    <!-- 地图 -->
    <div class="box">
      <div class="info">显示当前位置:</div>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iptVal: "", // 搜索输入
      city: "", // 城市信息
      list: [], // 搜索列表
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {},
  // 准备
  mounted() {
    // 若存储的城市信息存在则显示位置和点标记，否则初始化地图
    var cityInfo = this.$store.state.cityInfo;
    if (cityInfo.name) {
      // 定位位置
      var map = new AMap.Map("container", {
        zoom: 16, //级别
        center: [cityInfo.location.lng, cityInfo.location.lat], //中心点坐标
      });
      // 点标记
      var marker = new AMap.Marker({
        position: [cityInfo.location.lng, cityInfo.location.lat], //位置
      });
      map.add(marker); //添加到地图
    } else {
      // 初始化地图
      var map = new AMap.Map("container");
      // IP定位获取当前城市信息
      var _this = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            _this.city = result.city;
          }
        });
      });
    }
  },
  // 方法
  methods: {
    // 向stroe页面传递存储城市信息
    sendMessge(val) {
      this.$store.commit("uptCityInfo", val);
      // 跳转页面
      this.$router.push("/home");
    },
    // 搜索 - 提示
    iptEvents() {
      // 输入提示插件
      var _this = this;
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: _this.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(_this.iptVal, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          _this.list = result.tips;
        });
      });
    },
    // 搜索 - 取消
    onCancel() {
      // 清空搜索栏
      this.iptVal = "";
    },
  },
};
</script>

<style lang='scss' scoped>
.city {
  background-color: #fff;
  overflow: hidden;
  // 搜索
  .search {
    width: 340px;
    height: 48px;
    margin: 5px auto 5px;
    border: 0.8px solid #c3c3c3;
    border-radius: 5px;
    font-size: 16px;
  }
  // 列表
  .list {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 240px;
    left: 0px;
    background-color: #fff;
    .item {
      padding: 7.5px 15px;
      text-align: left;
    }
  }
  // 地图
  .box {
    background-color: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    .info {
      font-size: 16px;
      font-weight: bolder;
      padding: 10px;
      text-align: left;
    }
    #container {
      width: 100%;
      height: 200px;
    }
  }
}
</style>